 

<template>
    <tm-app class="createCircle">

        <view
            style="width: 750rpx; position: fixed; z-index: 100;background:#fff;"
            :style="{
                height: systemInfo.statusBarHeight + 'px',
            }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom:none;"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title">个人信息</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>

        <view class="content" :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }">

            <scroll-view class="scr" :scroll-y="true">
                <view class="coant">
                    <view class="toptitle">
                        <text>请完善个人信息，以便使用更多功能</text>
                    </view>
                    <view class="user-info" style="border-radius:10rpx;">
                        <view class="vict" @tap="goUserhead">
                            <view class="touxiang">头像</view>
                            <view class="imgs">
								<userhead
								    width="140"
								    height="140"
								    :saveKey="userInfo.id"
								    :isVip="userInfo.isVip"
								    :src="userInfo.photo"
								/>
								<!--
                                <image :src="userInfo.photo||'/static/head.jpg'" class="img-touxiang"></image>
								-->
                                <image src="/static/userinfo/more.png" class="right-b"></image>
                            </view>
                        </view>
                        <view class="nicheng d-flex a-center j-between" @tap="goEditNick">
                            <view class="nicheng-name">昵称</view>

                            <view class="d-flex a-center">
                                <text v-if="userInfo.nickName" class="inputr" style="font-size: 28rpx;">{{userInfo.nickName}}</text>
                                <text v-if="!userInfo.nickName" class="inputr" style="font-size: 28rpx;color:#999;">未填写</text>
                                <image src="/static/userinfo/more.png" class="right-b"></image>
                            </view>
                            
                            
                            <!-- <input class="inputr" style="font-size: 30rpx;" v-model="userInfo.nickName" @input="checkNickName(16)" @blur="UserUpdate" placeholder="昵称最多八个汉字" /> -->
                        </view>
                        <view class="xingbie" @tap="onSelectGender">
                            <view class="nicheng-name">性别</view>
                            <view class="imgs">
                                <view class="select">
                                    <i class="icon icon-nansheng" style="color:#8498ff" v-if="userInfo.sex === 1"></i>
                                    <i class="icon icon-nvsheng" style="color:#ff84cc;" v-if="userInfo.sex === 2"></i>
                                    <text class="select-text" style="font-size: 30rpx;" v-if="userInfo.sex">{{ getUserSex(userInfo.sex) }}</text>
                                    <text class="select-text" style="font-size: 30rpx;color:#999" v-if="!userInfo.sex">未选择</text>
                                </view>
                                <image src="/static/userinfo/more.png" class="right-b"></image>
                            </view>
                        </view>
                        <view class="xingbie" @tap="onSelectDate">
                            <view class="nicheng-name">出生日期</view>
                            <view class="imgs">
                                <view class="select">
                                    <text v-if="userInfo.birthday" style="font-size: 30rpx;" class="select-text">{{userInfo.birthday}}</text>
                                    <text v-if="!userInfo.birthday" class="select-text" style="font-size: 30rpx;color:#999">未选择</text>
                                </view>
                                <image src="/static/userinfo/more.png" class="right-b"></image>
                            </view>
                        </view>
                        <view class="gexingqianming" @tap="goEditSign">
                            <view class="mingzi">个性签名</view>
                            <view v-if="userInfo.signature" class="textare">
                                {{userInfo.signature}}
                            </view>
                            <view v-else class="textare" style="color:#999;">
                                介绍一下自己，不超过三十个字
                            </view>
                            <!-- <textarea :disabled="true" v-model="userInfo.signature" @input="checkLength(60)" @blur="UserUpdate" class="textare" placeholder="介绍一下自己，不超过三十个字"></textarea> -->
                        </view>
                        <view class="erweima-info" @tap="onShowerweima">
                            <view class="text-erweima">我的二维码</view>
                            <image src="/static/userinfo/erweima.png" class="erweima"></image>
                        </view>
                    </view>
                </view>
                <view class="lianxidianhua" style="border-radius:10rpx;">
                    <view class="iphone" @tap="goEditPhone">
                        <view class="num">
                            联系电话
                        </view>
                        <view class="num-type d-flex a-center" >
                            <text style="text-align:right;color:#333;font-size: 30rpx;">{{userInfo.telephone}}</text>
                            <!-- <input  style="text-align:right;color:#333;font-size: 30rpx;" v-model="userInfo.telephone" @blur="checkPhone" maxlength="11" type="number" placeholder="您的电话"> -->
                            <image src="/static/userinfo/more.png" class="right-b"></image>
                        </view>
                    </view>
                    <view class="iphone-heng"></view>
                    <view class="mes">您可以针对加入不容的群，开启或者关闭展示该联系电话。当处于开启状态时，仅群主可见,当关闭状态时,所有人均不可见。开启活关闭在群设置中。</view>
                </view>
                <view class="shenfen">
                    <view class="quanzhu_title d-flex a-center j-between">
                        <view class="q_name">
                            <text class="bj"></text>
                            <text class="name">实名认证</text>
                        </view>

                        <view v-if="!userInfo.isRealName"  style="color:#999;font-size:30rpx;">（未认证）</view>
                    </view>
                </view>


                <view v-if="userInfo.isRealName" class="nums">
                    <view class="title">
                        <view class="left-title">证件类型</view>
                        <view class="right-title">身份证</view>
                    </view>
                    <view class="title">
                        <view class="left-title">真实姓名</view>
                        <view class="right-title">{{desensitizeName(userInfo.realName)}}</view>
                    </view>
                    <view class="title">
                        <view class="left-title">身份证号码</view>
                        <view class="right-title">{{desensitizeID(userInfo.idCard)}}</view>
                    </view>
                </view>

                <view style="width:750rpx;height:240rpx;" class="btn_box d-flex a-center j-center" v-if="!userInfo.isRealName">

                    <view class="btn_main_r" @tap="goRealName">
                        <text class="text">实名认证</text>
                    </view>

                </view>

            </scroll-view>
        </view>
        <erweima :userInfo="userInfo" :show="codePopup" :qrcode="userQR" @openCodePopup="openCodePopup" />
        <gender  :show="genderPopup" :sex="userInfo.sex"  @onClosegenderPopup="onClosegenderPopup"
            @onGetGender="onGetGender" />
        <datepicker :datePopup="datePopup" :defaultDate="userInfo.birthday" @closeDatedatePopup="closeDatedatePopup" @onGetDate="onGetDate" />
    </tm-app>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    watch,
    nextTick,
    computed,
    onMounted,
    handleError,
} from "vue";
import { onReady, onShow,onHide, onLoad, onUnload,onBackPress } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getSelectConfig, createCircle, getService, getCircleDetail, groupUpdate,userUpdate,verifyRealName } from "@/api/api";
import { BASE_URL } from "@/api/request";
import erweima from "./components/erweima.vue";
import gender from "./components/gender.vue";
import datepicker from "./components/datepicker.vue";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { getUserDetail,getUserQR } from "@/api/api";
import { isPhone,desensitizeID,desensitizeName } from "@/utils/format"
import { checkSwear } from "@/utils/utils"
import userhead from "@/components/userhead.vue";


const systemConfig: any = systemConfigStore();
const userData: any = userDataStore();
const msg: any = ref(null);
const circleName: any = ref("");
const payAmount: any = ref(null);
const maxUserCount: any = ref(20);
const circlePhoto: any = ref(null);
const introduction: Ref<string> = ref("");
const introduction2: Ref<string> = ref("");
const allowVisitor = ref(true);
const needAuth = ref(true);
const currentStep = ref("step1");
const needPay = ref(0);
const currentService = ref({});
const titleText = ref('个人资料');
const codePopup: any = ref(false);
const genderPopup: any = ref(false);
const datePopup: any = ref(false);
const systemInfo: any = systemInfoStore();
const onShowerweima = () => {
    codePopup.value = true;
}

const openCodePopup = (props: any) => {
    console.log(props);
    codePopup.value = props;
}
const onSelectGender = () => {

    if(userInfo.value.sex){
        uni.showToast({
            icon: "none",
            title: "性别选定后不可修改",
            duration: 1500,
        });
        return;
    }

    genderPopup.value = true;
}
const onClosegenderPopup = (props: any) => {
    genderPopup.value = props;
}
// 选择年龄
const onGetGender = (sex: any) => {
    
    userInfo.value.sex = sex;
    UserUpdate();
}
const onSelectDate = () => {
    datePopup.value = true;
}
const closeDatedatePopup = (e: any) => {
    datePopup.value = e;
}
// 获取选择时间
const onGetDate = ({time,age}:any) => {
    userInfo.value.birthday = time;
    userInfo.value.age = age;
    UserUpdate();
}

const  goBack = () => {
	uni.navigateBack();
};

const  getUserSex = (num:number) => {
    if(num===1){
        return "男"
    }
    if(num===2){
        return "女"
    }

    return ''
};

onBackPress(() => {
    UserUpdate();
});


const goEditNick = ()=>{
    uni.navigateTo({
        url: `/pages/publicEdit/edit?title=修改昵称&emit=nickChange&notAllowEmpty=true&len=16&text=${userInfo.value.nickName}`,
    });
}

const goEditSign = ()=>{
    uni.navigateTo({
        url: `/pages/publicEdit/edit?title=修改签名&emit=signChange&type=textarea&len=60&text=${userInfo.value.signature}`,
    });
}

const goEditPhone = ()=>{
    uni.navigateTo({
        url: `/pages/publicEdit/edit?title=修改联系电话&emit=phoneChange&type=number&rule=phone&len=11&text=${userInfo.value.telephone}`,
    });
}

const nickChange = (str:string)=>{
    userInfo.value.nickName = str;
    UserUpdate();
}

const signChange = (str:string)=>{
    userInfo.value.signature = str;
    UserUpdate();
}


const phoneChange = (num:number)=>{
    userInfo.value.telephone = num;
    UserUpdate();
}

const UserUpdate = async ()=>{

    console.log('userInfo.value.nickName')
    console.log(userInfo.value.nickName)

    if(!checkSwear(userInfo.value.nickName)){
        uni.showToast({
            icon: "none",
            title: "昵称包含敏感词,请重新输入",
            duration: 1500,
        });

        return
    }


    console.log('userInfo.value.signature')
    console.log(userInfo.value.signature)
    console.log(checkSwear(userInfo.value.signature))

    if(!checkSwear(userInfo.value.signature)){
        uni.showToast({
            icon: "none",
            title: "签名包含敏感词,请重新输入",
            duration: 1500,
        });
        return
    }

    const params = {
        id:userInfo.value.id,
        photo:userInfo.value.photo,
        nickName:userInfo.value.nickName,
        sex:userInfo.value.sex,
        signature:userInfo.value.signature,
        telephone:userInfo.value.telephone,
        birthday:userInfo.value.birthday,
        age:userInfo.value.age,
    }

    if(!isPhone(userInfo.value.telephone)){
        delete params.telephone
    }

    const res = await userUpdate(params)
    const {flag} = res;
    if(flag===1){
        uni.$emit('userInfoUpdate')
    }
}


const goUserhead = ()=>{
    uni.navigateTo({
        url: `/pages/userinfo/userhead?userhead=${userInfo.value.photo}`,
    });
}

const checkLength = (maxLength: number) => {
    let content = userInfo.value.signature.trim();
    let str = "";
    let len = 0;
    for (var i = 0; i < content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len += 2;
        } else {
            len++;
        }

        if (len <= maxLength) {
            str += content[i];
        }
    }
    nextTick(() => {
        userInfo.value.signature = str;
    });
};

const checkNickName = (maxLength: number) => {
    let content = userInfo.value.nickName.trim();
    let str = "";
    let len = 0;
    for (var i = 0; i < content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len += 2;
        } else {
            len++;
        }

        if (len <= maxLength) {
            str += content[i];
        }
    }
    nextTick(() => {
        userInfo.value.nickName = str;
    });
};

const goRealName=()=>{
    uni.navigateTo({
            url: '/pages/userinfo/card',
    });
}

const checkPhone=()=>{
    if(!isPhone(userInfo.value.telephone)){
        uni.showToast({
            icon: "none",
            title: '您输入的手机号有误，请检查',
            duration: 2000,
        });
        return;
    }
    UserUpdate();
}

const userInfo = ref({});
const userQR = ref('');

const getUserInfo = async()=>{
    const res:any = await getUserDetail({id:userData.id})
    const { flag, data,message} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: message||'获取用户资料失败',
            duration: 2000,
        });
        return
    }
    userInfo.value = data;
}

const GetUserQR = async()=>{
    const res:any = await getUserQR({id:userData.id})
    const { flag, data,message} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: message||'获取用户二维码失败',
            duration: 2000,
        });
        return
    }

    userQR.value = data.data;
}

const userheadChange =async (url)=>{
    userInfo.value.photo = url;
    await UserUpdate();
    GetUserQR();

}

onShow(()=>{
})
onHide(()=>{
})
onLoad(()=>{
    getUserInfo();
    GetUserQR();
    uni.$on('userheadChange',userheadChange)
    uni.$on("realNameUpdate", getUserInfo);
    uni.$on("nickChange", nickChange);
    uni.$on("signChange", signChange);
    uni.$on("phoneChange", phoneChange);
})
onUnload(()=>{
    uni.$off('userheadChange',userheadChange)
    uni.$off("realNameUpdate", getUserInfo);
    uni.$off("nickChange", nickChange);
    uni.$off("signChange", signChange);
    uni.$off("phoneChange", phoneChange);
})



</script>



<style lang="scss" scoped>
.req {
    color: red;
}

.slim_form {
    border-radius: 20rpx;
    overflow: hidden;

    .slim_row {
        width: 100%;
        height: 80rpx;
        padding: 0 30rpx;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &.needActive:active {
            background-color: #f5f5f5;
            opacity: 0.8;
        }

        .left_box {
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: $slim-text3;
        }

        .right_box {
            display: flex;
            align-items: center;
            color: $slim-text3;

            .inp {
                width: 350rpx;
                font-size: 30rpx;
                text-align: right;
                height: 100%;
            }

            .more {
                color: #ccc;
                font-size: 24rpx;
                margin-left: 10rpx;
            }
        }
    }
}

.createCircle {
    position: relative;
    width: 750rpx;
    height: 100%;

    .content {
        position: absolute;
        width:750rpx;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f5f5f5;
    }

    .right-b {
                            width: 20rpx;
                            height: 20rpx;
                            margin-left: 10rpx;
                        }

    .scr {
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        bottom: calc(constant(safe-area-inset-bottom));
        bottom: calc(env(safe-area-inset-bottom));

        .coant {
            .toptitle {
                width: 100%;
                height: 70rpx;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 70rpx;
                padding: 0 50rpx;
                box-sizing: border-box;
            }

            .user-info {
                width: 710rpx;
                margin: 0 auto;
                background: #FFFFFF;

                .vict {
                    width: 100%;
                    height: 180rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    padding: 0 30rpx;

                    &:active{
                        background:#f5f5f5;
                    }


                    .touxiang {
                        font-size: 30rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        flex: 1;
                        color: #333333;
                    }

                    .imgs {
                        display: flex;
                        align-items: center;

                        .img-touxiang {
                            width: 140rpx;
                            height: 140rpx;
                            box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
                            border: 3rpx solid #FFFFFF;
                            border-radius: 50%;
                        }


                    }

                }

                .nicheng {
                    width: 100%;
                    height: 80rpx;
                    padding: 0 30rpx;
                    display: flex;

                    .nicheng-name {
                        font-size: 30rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }

                    &:active{
                        background:#f5f5f5;
                    }


                }

                .xingbie {
                    display: flex;
                    padding: 0 30rpx;
                    justify-content: space-between;
                    height: 80rpx;
                    align-items: center;

                    &:active{
                        background:#f5f5f5;
                    }

                    .nicheng-name {
                        font-size: 30rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }

                    .imgs {
                        display: flex;
                        align-items: center;

                        .select {
                            display: flex;
                            align-items: center;

                            .icon {
                                font-size: 50rpx;
                            }
                            

                            .select-text {
                                font-size: 32rpx;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #333333;
                            }


                        }

                    }
                }

                .gexingqianming {
                    width: 100%;
                    padding: 0 30rpx;

                    .mingzi {
                        width: 100%;
                        height: 80rpx;
                        line-height: 80rpx;
                        font-size: 30rpx;
                    }

                    .textare {
                        width: 100%;
                        height: 140rpx;
                        background: #F5F5F5;
                        padding: 20rpx;
                        font-size: 30rpx;
                        border-radius: 10rpx;

                    }
                }

                .erweima-info {
                    margin-top: 20rpx;
                    width: 100%;
                    height: 80rpx;
                    display: flex;
                    align-items: center;
                    padding: 0 30rpx;
                    justify-content: space-between;

                    .erweima {
                        width: 36rpx;
                        height: 36rpx;


                    }

                    .text-erweima {
                        line-height: 80rpx;
                        font-size: 30rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }
                }

            }
        }

        .lianxidianhua {
            width: 710rpx;
            height: 220rpx;
            margin: 20rpx auto;
            background-color: #FFFFFF;
            padding: 0 30rpx;

            .iphone {
                width: 100%;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                &:active{
                    background:#f5f5f5;
                }

                .num {
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }

                .num-type {
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                }


            }

            .iphone-heng {
                width: 650rpx;
                height: 1px;
                background: #D8D8D8;
                border-radius: 3px;
            }

            .mes {
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                padding: 14rpx 0 16rpx 0;
                box-sizing: border-box;
            }

        }

        .shenfen {
            .quanzhu_title {
                width: 100%;
                height: 84rpx;
                padding: 0 30rpx;

                .q_name {
                    position: relative;
                    font-size: 34rpx;
                    font-weight: 600;
                    color: #333333;
                    height: 48rpx;
                    box-sizing: border-box;

                    .name {
                        width: 136rpx;
                        z-index: 99;
                        position: relative;
                        left: 0;
                        top: 0;
                    }

                    .bj {
                        width: 136rpx;
                        height: 26rpx;
                        background: linear-gradient(270deg,
                                rgba(73, 243, 210, 0) 0%,
                                #23e2a6 100%);
                        border-radius: 13rpx;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        z-index: 1;
                    }
                }

                .time {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;

                    .more {
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }
        }
        .no_real{
            height:150rpx;
            color:#999;
            font-size:26rpx;
        }

        .nums {
            width: 710rpx;
            height: 240rpx;
            background-color: #FFFFFF;
            margin: 0 auto;
            border-radius: 10rpx;
            .title {
                height: 80rpx;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30rpx;
                .left-title {
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
                .right-title{
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
            }
        }
    }


    .btn_main {
        display: block;
        height: 80rpx;
        border-radius: 40rpx;
        line-height: 80rpx;
        z-index: 100;
    }

    .btn1 {
        display: block;
        height: 80rpx;
        border-radius: 40rpx;
        line-height: 80rpx;
    }
}

.uni-easyinput__content {
    background-color: #f5f5f5 !important;
    padding: 0 20rpx;
}

.uni-textarea-textarea {
    font-size: 30rpx !important;
    color: $slim-text3;
}

.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
    color: #1dc691 !important;
}

.uni-picker-container .uni-picker-item {
    color: #1dc691 !important;
}
</style>
